<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: rgb(0, 0, 0, .5);
        }

        .span1 {
            color: green;
        }

        .span2 {
            color:
                red;
        }
    </style>
</head>

<body>
    <input type="text"> <span>请输入用户名</span><br>
    <button>提交</button>
    <script>
        // const obj = {
        //     name: 'zs',
        //     age: 17,
        //     msg: {
        //         id: 1
        //     },
        //     arr: [2, 35, 5]
        // }
        // const o = {}
        //浅拷贝

        // Object.assign(o, obj);
        // console.log(o);
        // o.age = 20;
        // console.log(obj);

        //深拷贝
        // function deepCopy(newobj, oldobj) {
        //     for (const key in oldobj) {
        //         let item = oldobj[key];
        //         if (item instanceof Array) {
        //             newobj[key] = [];
        //             deepCopy(newobj[key], item)
        //         } else if (item instanceof Object) {
        //             newobj[key] = {};
        //             deepCopy(newobj[key], item)
        //         } else {
        //             newobj[key] = item;
        //         }
        //     }
        // };
        // deepCopy(o, obj);
        // console.log(o);
        // o.msg.id = 2;
        // console.log(obj.msg.id);
        // const rg = /^123/;
        // // const rgs = new RegExp(/\d/)
        // const rg1 = /123$/
        // const rg2 = /^\d$/
        // console.log(rg.test('12334'));

        // console.log(rg1.test('1421123'));
        // console.log(rg2.test('5'));

        // const rg = /[a-z]/
        // console.log(rg.test('s'));
        // const rg1 = /^[a-z]$/;   //多选一
        // console.log(rg1.test('ww'));//false

        // const rg = /^[^a-zA-Z\d_-]$/;//^在中括号里表示取反
        // console.log(rg.test('2')); //false
        // console.log(rg.test('a'));//false
        // console.log(rg.test('S'));//false

        // console.log(rg.test('#'));//ture
        // console.log(rg.test('_'));

        // const rg = /^[a-zA-Z\d_-]+$/; //重复一次及以上
        // console.log(rg.test('aa'));
        // const rg1 = /^[a-zA-Z\d_-]?$/;//重复一次及零次
        // console.log(rg1.test('aa'));
        // const rg2 = /^[a-zA-Z\d_-]{3}$/;//重复三次
        // console.log(rg2.test('aaa'));
        // const rg3 = /^[a-zA-Z\d_-]{3,}$/;//重复三次及以上
        // console.log(rg3.test('aaadas'));
        // const rg4 = /^[a-zA-Z\d_-]{3,6}$/;//重复三次至六次
        // console.log(rg4.test('aaa23s'));
        const inp = document.querySelector('input');
        const btn = document.querySelector('button');
        const span = document.querySelector('span')
        btn.addEventListener('click', function () {
            // const rg4 = /^[a-zA-Z\d_-]{3,6}$/;
            const rg = /(^\d{3}\-\d{8}$)|(^\d{4}\-\d{7}$)/
            if (rg.test(inp.value)) {
                span.innerHTML = `<span class=span1>验证通过</span>`
            } else {
                span.innerHTML = `<span class=span2>输入格式错误，请输入11位数字及字母组成的用户名</span>`
            }
        })




    </script>
</body>

</html>